<template>
	<view>
		<u-navbar title="使用记录" bgColor="#ffffff" safeAreaInsetTop :placeholder="true" leftIconColor="#000000"
			@leftClick="back" titleStyle="{fontSize: 16px;font-weight: bold;color: #000000;}">
			<view class="u-nav-slot f-base bold flex-no-horizontal" slot="right" @click="toConvert">
				<u-image src="../../static/img/convert-vigor-icon.png" width="15" height="15" class="m-r-5"></u-image>
				<text class="bold f-base">{{massagerRecord.score_total}}</text>
			</view>
		</u-navbar>
		<view class="p-20">
			<view v-if="list.length">
				<view class="m-b-10" v-for="(item, index) in list" :key="item.id">
					<view class="between f-base flex-no-horizontal">
						<text>{{item.hardware_name}}#{{item.number}}</text>
						<text>+{{item.score}}</text>
					</view>
					<view class="f-xs m-t-5 grey">{{item.start_time | dateFormat('day')}} - {{item.end_time | dateFormat('day')}}</view>
				</view>
			</view>
			<view v-else>
				<u-empty mode="data" text="暂时没有使用记录" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
			</view>
		</view>
		<view class="loadmores" v-if="list.length">
			<u-loadmore :status="loadings.status" :loading-text="loadings.loadingText"
				:loadmore-text="loadings.loadmoreText" :nomore-text="loadings.nomoreText" />
		</view>
		
	</view>
</template>

<script>
	import {
		deviceListApi,
		massageRecord
	} from '@/api/bluetooth.js'
	export default {
		data() {
			return {
				massagerRecord: {}, //使用记录
				size: 15,
				page: 1,
				loadings: {
					status: 'loadmore',
					loadingText: '努力加载中',
					loadmoreText: '轻轻上拉',
					nomoreText: '没有更多记录了啦 快多去使用吧'
				},
				list: []
			}
		},
		onLoad() {
			this.getMassageRecord()
		},
		onReachBottom() {
			setTimeout(() => {
				if (this.loadingType == 'noMore') return
				this.page++;
				this.getMassageRecord();
			}, 500);
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.getMassageRecord()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//获取使用*记录
			async getMassageRecord() {
				try {
					const res = await massageRecord({
						page: this.page,
						size: this.size
					})
					this.massagerRecord = res.data
					this.page == 1 ?
						this.list = this.massagerRecord.record :
						this.list = this.list.concat(this.massagerRecord.record);
					(this.massagerRecord.record.length == 0 && this.page != 1) || this.list.length < this.size ?
						this.loadings.status = 'nomore' :
						this.loadings.status = 'loading';

				} catch (e) {
					console.log(e)
					uni.showToast({
						title: e.message,
						icon: 'none'
					})
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style>
	>>>.p-20{
		padding-bottom: 20rpx!important;
	}
	.loadmores{
		padding-bottom: 40rpx;
	}
	.grey {
		color: #8F9091;
	}
</style>
